<template>
	<view class="grace-swipe-list" :style="{ width: width + 'rpx' }">
		<graceTouch @thStart="thStart" @thMove="thMove" @thEnd="thEnd" :datas="[0]">
			<view class="grace-swipe-list-item" :style="{ width: width + 'rpx' }">
				<view class="grace-swipe-list-item-body" :style="{ width: width + 'rpx', marginLeft: marginLeft * -1 + 'px' }">
					<view class="grace-swipe-list-img grace-flex grace-flex-vcenter" :style="{ width: imgSize[0], height: imgSize[1] }">
						<image :src="img" mode="widthFix" :style="{ width: imgSize[0], height: imgSize[1], borderRadius: '6rpx' }"></image>
					</view>
					<view class="grace-swipe-list-content"><slot name="body"></slot></view>
				</view>
				<view class="grace-swipe-btns grace-flex grace-flex-vcenter" :style="{ width: marginLeft + 'px' }">
					<view class="grace-swipe-btn" v-for="(btn, btnIndex) in btns" :key="btnIndex" :style="{ backgroundColor: btn.bgColor }" @tap.stop="btnTap(btnIndex)">
						<text class="grace-swipe-btn-text"  @tap="btnTap(btnIndex)">{{ btn.name }}</text>
					</view>
				</view>
			</view>
		</graceTouch>
	</view>
</template>
<script>
import graceTouch from '@/graceUI/components/graceTouch.vue';
export default {
	props: {
		//列表宽度
		width: { type: Number, default: 750 },
		//按钮宽度
		btnWidth: { type: Number, default: 160 },
		btns: {
			type: Array
		},
		//图片大小
		imgSize: {
			type: Array,
			default: function() {
				return ['100rpx', '100rpx'];
			}
		},
		//图片
		img: {
			type: String,
			default: '/static/empty.png'
		}
	},
	data() {
		return {
			damping: 0.1,
			marginLeft: 0 //滑动外边距
		};
	},
	methods: {
		//开始滑动
		thStart: function(e) {
			this.damping = 0.1;
			if (this.marginLeft > 10) {
				setTimeout(()=>{
					this.toZero(0);
				},800)
			}
			//抛出滑动开始事件
			this.$emit('thStart')
		},
		thMove: function(e) {
			this.marginLeft -= e[0][0] * this.damping;
			if (this.marginLeft > this.btnWidth) {
				this.marginLeft = this.btnWidth;
			}
			if (this.marginLeft < 0) {
				this.marginLeft = 0;
			}
			this.damping *= 1.2;
			
		},
		thEnd: function(e) {
			if (e[1] < 150) {
				if (this.marginLeft >= 5) {
					setTimeout(()=>{
						this.toZero(0);
					},800)
					return;
				}
				if (Math.abs(e[0][0]) < 30) {
					this.$emit('itemTap', 0);
				}
				return;
			}
			var item = 0;
			if (this.marginLeft < this.btnWidth / 3) {
				this.marginLeft = 0;
			} else {
				this.marginLeft = this.btnWidth;
			}
		},
		//隐藏按钮
		toZero: function() {
			//如果当前位置小余10
			if (this.marginLeft <= 10) {
				this.marginLeft = 0;
				return;
			}
			//每次减10像素，也可以控制收回时间
			this.marginLeft -= 10;
			//每10秒调用一次自己
			setTimeout(() => {
				this.toZero(0);
			}, 10);
		},
		btnTap: function(indexBtn) {
			this.$emit('btnTap', indexBtn);
		}
	},
	components: {
		graceTouch
	}
};
</script>
<style>
.grace-swipe-list {
	overflow: hidden;
}
.grace-swipe-list-item {
	overflow: hidden;
	position: relative;
}
.grace-swipe-list-item-body {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-size: 0;
	align-items: center;
}
.grace-swipe-list-img {
	flex-shrink: 0;
	margin-left: 25rpx;
	font-size: 0;
	position: relative;
}

.grace-swipe-list-content {
	width: 750rpx;
	overflow: hidden;
	padding-top: 25rpx;
	padding-bottom: 25rpx;
	margin-left: 22rpx;
	border-bottom: 1px solid #f1f2f3;
}
.grace-swipe-btns {
	width: 0rpx;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.grace-swipe-btn {
	width: 400rpx;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}
.grace-swipe-btn-text {
	line-height: 36rpx;
	height: 36rpx;
	overflow: hidden;
	display: block;
	font-size: 30rpx;
	color: #ffffff;
}
</style>
